<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

	<title>OpenSurfaces - A Richly Annotated Catalog of Surface Appearance</title>
	<meta name="description" content='OpenSurfaces is a large database of annotated surfaces created from real-world consumer photographs. Our annotation framework draws on crowdsourcing to segment surfaces from photos, and then annotate them with rich surface properties, including material, texture and contextual information.'/>
	<meta name="author" content="Cornell University"/>

	<!-- merged css -->
	<link href="/static/css/opensurfaces-segmentation-ui.css" rel="stylesheet" type="text/css" />
	<style>
		canvas { border: 1px solid #969696; }
		body { padding: 0 }
	</style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- BEGIN MAIN UI -->
	<div id='content-container'>
		<div id="mt-top-nohover">
			<div id="mt-instructions">
				<span>
					Instructions: carefully trace around regions that have a single material or texture.
					Draw <span id="mt-num-shapes">six polygons</span> to complete the task.
				</span>
				<span class="pull-right">
					<button type="button" id='btn-submit' class="btn btn-primary" disabled="disabled">Submit</button>
				</span>
			</div>

			<div id="ui-controls" class="ui-controls-top">
				<span class="btn-group" data-toggle="buttons-radio">
					<button id='btn-draw' type="button" class="btn" disabled="disabled">
						<i class="icon-pencil"></i> Draw (D)</button>
					<button id='btn-edit' type="button" class="btn" disabled="disabled">
						<i class="icon-move"></i> Adjust (A)</button>
				</span>
				<span class="btn-group">
					<button id='btn-undo' type="button" disabled="disabled" class="btn">
						<i class="icon-circle-arrow-left"></i> Undo (Ctrl-Z)</button>
					<button id='btn-redo' type="button" disabled="disabled" class="btn">
						<i class="icon-circle-arrow-right"></i> Redo (Ctrl-Y)</button>
				</span>
				<span class="btn-group">
					<button id='btn-close' type="button" disabled="disabled" class="btn">
						<i class="icon-ok-sign"></i> Close (Right-click)</button>
					<button id='btn-delete' type="button" disabled="disabled" class="btn">
						<i class="icon-remove"></i> Delete (Delete)</button>
				</span>
				<span class="btn-group">
					<button id='btn-zoom-reset' type="button" disabled="disabled" class="btn">
						<i class="icon-resize-small"></i> Reset Zoom (Esc)</button>
				</span>

				<span class="pull-right">
					<a href="#modal-instructions" role="button" class="btn btn-warning" data-toggle="modal">Instructions</a>
				</span>
			</div>

		</div>
		<div id="mt-container"></div>
	</div>
<!-- END MAIN UI -->

<!-- BEGIN MODALS -->
	<!-- Instructions dialog -->
	<div class="modal hide fade" id="modal-instructions" tabindex="-1" role="dialog"
		aria-labelledby="modal-instructions-label" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">&times;</button>
			<h3 id="modal-instructions-label">Instructions</h3>
		</div>
		<div class="modal-body">
			<div class="container-fluid">

				<h2>What to draw</h2> <p>Please draw shapes around regions that have a
				<i>single</i> material or texture.  Some example materials: wood, steel,
				bricks, tiles, ceramic, plastic.  If you don't know what to draw, floors,
				walls, and countertops are usually one material -- just be careful to exclude
				things on top.</p>

				<p>Please make the region as tight as possible.  <b>Your shape should exactly
					follow the material boundary.</b>  Use the &quot;adjust&quot; button (or
				press 'A') to improve the shape boundary.</p>

				<p>If there is something like a brick wall or tiled floor, please include all
				the tiles; do not draw a square around one tile.  Large regions are
				preferable.</p>

				<p>Example: if a wood cabinet has a metal handle, then the metal portion is a
				different material and should be excluded.  If you are drawing a shape around a
				person, their skin and clothing should not be in two different shapes.  You can
				also exclude regions by overlapping shapes.  See the below examples.</p>

				<p>Draw six polygons to complete
				the task.</p>

				<br/>

				<h2>Good examples</h2>

				<div class="row-fluid">
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/good5.jpg"  alt="" />
							<p class="caption">Large flat regions are preferable, though not necessary.</p>
						</div>
					</div>
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/good4.jpg"  alt="" />
							<p class="caption">Make the boundary as tight as possible.</p>
						</div>
					</div>

				</div>
				<div class="row-fluid">
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/good12.jpg"  alt="" />
							<p class="caption">Be careful to not include items of a different material.</p>
						</div>
					</div>
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/good11.jpg"  alt="" />
							<p class="caption">Shapes can be nested.</p>
						</div>
					</div>
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/good9.jpg"  alt="" />
							<p class="caption">Shapes can intersect.</p>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="thumbnail">
							<img src="/static/img/segment_material_good2.jpg"  alt="" />
							<p class="caption">Please do not draw around individual bricks; draw a shape around larger wall portions.</p>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<div class="thumbnail">
							<img src="/static/img/segment_material_good1.jpg"  alt="" />
						</div>
					</div>
				</div>

				<br/>

				<h2>Bad examples</h2>
				<p>We will reject HITs that do not follow these instructions.</p>

				<div class="row-fluid">
					<div class="span6">
						<div class="thumbnail">
							<img src="/static/img/segment_material_bad1.jpg"  alt="" />
							<p class="caption">These are sloppy shapes.</p>
						</div>
					</div>
					<div class="span6">
						<div class="thumbnail">
							<img src="/static/img/segment_material_bad2.jpg"  alt="" />
							<p class="caption">Please do not do this.</p>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="thumbnail">
							<img src="/static/img/segment_material_bad3.jpg"  alt="" />
							<p class="caption">Please make the regions bigger than this.</p>
						</div>
					</div>
					<div class="span6">
						<div class="thumbnail">
							<img src="/static/img/segment_material_bad4.jpg"  alt="" />
							<p class="caption">These shapes contain multiple materials and are nowhere near the correct boundaries.</p>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/bad1.jpg"  alt="" />
							<p class="caption">This shape includes more than one type of material.</p>
						</div>
						<br/>
						<div class="thumbnail">
							<img src="/static/img/bad4.jpg"  alt="" />
							<p class="caption">This includes other objects; the other objects should have shapes around them.</p>
						</div>
					</div>
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/bad6.jpg"  alt="" />
							<p class="caption">This includes the edges of other objects.</p>
						</div>
						<br/>
						<div class="thumbnail">
							<img src="/static/img/bad3.jpg"  alt="" />
							<p class="caption">This shape is too sloppy.</p>
						</div>
					</div>
					<div class="span4">
						<div class="thumbnail">
							<img src="/static/img/bad5.jpg"  alt="" />
							<p class="caption">This contains more than one type of material.</p>
						</div>
						<br/>
						<div class="thumbnail">
							<img src="/static/img/bad2.jpg"  alt="" />
							<p class="caption">This contains many substances.</p>
						</div>
					</div>
				</div>
				<br/>

				<h2>How to draw</h2>
				<div class="row-fluid">
					<div class="span12">
						<ul class="thumbnails">
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">1</span> Click on the material boundary.</p>
								<img src="/static/img/draw1.jpg" alt=""></div> </li>
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">2</span> Continue clicking along the boundary.</p>
								<img src="/static/img/draw5.jpg" alt=""></div> </li>
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">3</span> Right-click to close the polygon.</p>
								<img src="/static/img/draw6.jpg" alt=""></div> </li>
						</ul>
					</div>
				</div>

				<p>To close the shape, you do not need to click near the first point. You can
				right-click to connect the first and last point.</p>

				<h2>Adjust your shapes</h2>
				<p>After drawing a polygon, please adjust its edges so that it better fits the true boundary.
				When you are done adjusting, switch back to &quot;Draw&quot; mode to draw more polygons.</p>
				<p>You can press the D and A key to quickly switch modes.</p>

				<div class="row-fluid">
					<div class="span12">
						<ul class="thumbnails">
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">1</span> Switch to &quot;Adjust&quot; mode.</p>
								<img src="/static/img/adjust0.jpg" alt=""></div> </li>
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">2</span> Click on the polygon.</p>
								<img src="/static/img/adjust1.jpg" alt=""></div> </li>
							<li class="span4"> <div class="thumbnail"><p class="caption">
								<span class="badge">3</span> Drag the small white circles.</p>
								<img src="/static/img/adjust2.jpg" alt=""></div> </li>
						</ul>
					</div>
				</div>

				<h2>Zoom in to see better</h2>
				<p>Scroll with the mouse wheel to zoom in.  Click &quot;Reset Zoom&quot; or press escape to reset back to normal.</p>
				<br/>

				<h2>Move around in the image</h2>
				<p>Press 'space' and drag with the mouse to move around in the image (panning).  You can also move press the arrow keys to move.</p>
				<br/>

				<h2>Other controls</h2>
				<div class="row-fluid">
					<div class="span12">
						<img src="/static/img/controls.jpg" alt="" />
					</div>
				</div>
				<div class="row-fluid">
					<div class="span12">
						<dl class="dl-horizontal">
							<dt>Undo</dt> <dd>If you make a mistake, click &quot;Undo&quot; or press Ctrl-Z.</dd>
							<dt>Redo</dt> <dd>You can also re-do an action with Ctrl-Y.</dd>
							<dt>Close</dt> <dd>To close a polygon, right-click on the image or you can click the &quot;Close&quot; button.</dd>
							<dt>Delete</dt> <dd>You can delete polygons by selecting them with the &quot;Adjust&quot; button and pressing delete.</dd>
							<dt>Reset Zoom</dt> <dd>When zoomed in, you you can click &quot;Reset Zoom&quot; to zoom out again.</dd>
							<dt>Instructions</dt> <dd>Show this page during the task.</dd>
						</dl>
					</div>
				</div>
				<br/>

				<h2>Mirrors and windows</h2>
				<p>If there is a mirror, draw a shape around the mirror surface itself, not the
				things that you can see in the reflection.  Similarly, draw a shape around the
				window glass, and not the things you can see through the window.</p>

				<br/>
				<h2>Why are we doing this?</h2>
				<p>We are building a database of materials from images on the web.  This is part of ongoing research at Cornell University.</p>
				<p>Thank you for participating!</p>
				<br/>


			</div>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
		</div>
	</div>

	<!-- Loading bar -->
	<div class="modal hide fade" id="modal-loading" tabindex="-1" role="dialog" aria-labelledby="modal-loading-label" aria-hidden="true">
		<div class="modal-header">
			<h3 id="modal-loading-label"></h3>
		</div>
		<div class="modal-body">
			<div class="progress progress-striped active">
				<div class="bar" style="width: 100%;">Please Wait</div>
			</div>
		</div>
	</div>

	<!-- Error message -->
	<div class="modal hide fade" id="modal-error" tabindex="-1" role="dialog" aria-labelledby="modal-error-label" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3 id="modal-error-label">Error!</h3>
		</div>
		<div class="modal-body">
			<div id="modal-error-message">
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
		</div>
	</div>

	<!-- Are you sure question -->
	<div class="modal hide fade" id="modal-areyousure" tabindex="-1" role="dialog"
		aria-labelledby="modal-areyousure-label" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3 id="modal-areyousure-label">Are you sure?</h3>
		</div>
		<div class="modal-body">
			<p id="modal-areyousure-message"></p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true" id="modal-areyousure-no">No</button>
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="modal-areyousure-yes">Yes</button>
		</div>
	</div>

	<!-- Feedback survey -->
	<div class="modal hide fade" id="modal-feedback" tabindex="-1" role="dialog"
		aria-labelledby="modal-feedback-label" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">&times;</button>
			<h3 id="modal-feedback-label">Feedback</h3>
		</div>
		<div class="modal-body">
			<div id="modal-feedback-prompt"></div>
			<form id='modal-feedback-form' class='form-horizontal'>

				<div class="control-group">
					<label class="control-label" for="feedback-thoughts">What did you think of this task?</label>
					<div class="controls">
						<textarea id="feedback-thoughts" rows="6"></textarea>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="feedback-understand">What parts didn't you understand?</label>
					<div class="controls">
						<textarea id="feedback-understand" rows="6"></textarea>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="feedback-other">Any other feedback, improvements, or suggestions?</label>
					<div class="controls">
						<textarea id="feedback-other" rows="6"></textarea>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true" id="modal-feedback-cancel">Cancel</button>
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="modal-feedback-submit">Submit</button>
		</div>
	</div>

	<!-- Script for feedback survey -->
	<script type="text/javascript">
		window.show_modal_feedback = function(label_message, prompt_message, on_submit) {
			$('#modal-feedback-label').empty();
			$('#modal-feedback-bonus').empty();
			$('#modal-feedback-prompt').empty();
			if (label_message !== undefined) {
				$('#modal-feedback-label').html(label_message);
			}
			if (prompt_message !== undefined) {
				$('#modal-feedback-prompt').html(prompt_message);
			}
			$('#modal-feedback').modal('show');
			if (on_submit !== undefined) {
				$('#modal-feedback-submit').off('click').on('click', on_submit);
			}
		};
		window.get_modal_feedback = function() {
			var feedback = {};
			var names = ['thoughts', 'understand', 'other'];
			for (var i = 0; i < names.length; i++) {
				var value = $.trim($('#feedback-' + names[i]).val());
				if (value) {
					feedback[names[i]] = value;
				}
			}
			return feedback;
		};
	</script>

	<!-- Message about valid polygons -->
	<div class="modal hide fade" id="poly-modal-intersect" tabindex="-1" role="dialog"
		aria-labelledby="modal-intersect-label" aria-hidden="true">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">&times;</button>
			<h3 id="poly-modal-intersect-label">Not a valid polygon!</h3>
		</div>
		<div class="modal-body">
			<p>Polygons must contain at least
			<strong>four</strong>
			points and cannot intersect themselves.  Try adding more points so
			that the first and last point can connect.</p>

			<div class="thumbnail span2">
				<img src="/static//img/bad-close.jpg" alt=""/>
				<p class="mt-caption">This polygon cannot close.</p>
			</div>
			<div class="thumbnail span2">
				<img src="/static//img/bad-vertex.jpg" alt=""/>
				<p class="mt-caption">This edge cannot be added.</p>
			</div>
			<div class="thumbnail span2">
				<img src="/static//img/good-close.jpg" alt=""/>
				<p class="mt-caption">This polygon can be closed.</p>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
		</div>
	</div>
<!-- END MODALS -->


<!-- BEGIN MAIN SCRIPTS -->
	<script type="text/javascript">
		/* photo_url:  URL of the photo to be shown

		   photo_id: database ID of the photo being segmented.  The results
		   will be returned in a JSON object with the format:
 		       {"photo_id": [[x1,y1,x2,y2,...], [x1,y1,x2,y2,...]]}
 		   otherwise, photo_id is not used.
 		*/
		window.template_args = {
			photo_url: 'http://farm9.staticflickr.com/8204/8177262167_d749ec58d9_h.jpg',
			photo_id: 1,
		};

		// the user must submit this many shapes before they may submit:
		window.min_shapes = 6;

		// each polygon must have at least this many vertices:
		window.min_vertices = 4;

		// if true, show a popup survey at the end of the task
		window.ask_for_feedback = true;

		// amount of money (bonus) promised for completing the survey
		window.feedback_bonus = '$0.02';
	</script>

	<!-- merged javascript libraries and compiled coffeescript -->
	<script type="text/javascript" src="/static/js/opensurfaces-segmentation-ui.js"></script>

<!-- END MAIN SCRIPTS -->

</body>
</html

